<template>
    <div class="editordemo-box">
        <!--id="app"-->
        <div class="editordemo-header">
            <div>amis可视化编辑器</div>
            <div>
                <el-button type="primary" size="small" @click="changePreview">{{isPreview?'编辑':'预览'}}</el-button>
                <el-button type="primary" size="small" @click="changeMedia">{{isMobile?'pc':'mobile'}}</el-button>
                <!--<el-button @click="changeLang">中英文</el-button>-->
                <el-button  size="small" @click="$router.push('/')">退出</el-button>
            </div>
        </div>
        <div class="editor-content">
            <amisEditor id="editorName" theme="cxd" className="is-fixed" :isPreview="isPreview" :isMobile="isMobile" @onChange="onChange" :value="schema"  ></amisEditor>
        </div>

    </div>
</template>

<script>
    import amisEditor from '../components/amisEditor'

    export default {
        name: 'App',
        components: {
            amisEditor
        },
        data() {
            return {
                isPreview:false,
                isMobile:false,
                post: {
                    json: '',
                    amis_page_id: 15,
                },
              //  baseURL: 'https://beauty.tieninc.com/index.php/',

                schema: {},
            }
        },
        onLoad() {

        },
        methods: {
            changePreview() {
                this.isPreview=!this.isPreview
            },
            changeMedia() {
                this.isMobile=!this.isMobile
            },
            changeLang() {
                //todo
            },
            onChange(e) {
            },
        }
    }
</script>

<style lang="scss">
    .editordemo-header{
        position: relative;
        z-index:999;
        left:0;
        right:0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e8e9eb;
        padding-right: 20px;
        padding-left: 20px;
        height: 48px;
        line-height: 48px;
    }
    .editor-content {
        position: relative;
    }
</style>
